<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input
          v-model="query.name"
          clearable
          size="small"
          placeholder="输入用户名称"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="toQuery"
        />
        <el-select v-model="query.type" style="width: 200px;" class="filter-item" placeholder="请选择用户类型">
          <el-option key="1" label="家长" :value="0" />
          <el-option key="2" label="机构" :value="1" />
        </el-select>
        <rrOperation />
      </div>
    </div>
    <!--Form表单-->
    <el-dialog
      :close-on-click-modal="false"
      :before-close="crud.cancelCU"
      :visible.sync="crud.status.cu > 0"
      :title="crud.status.title"
      append-to-body
      width="730px"
    >
      <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="100px">
        <el-form-item label="任务描述" prop="description">
          <el-input v-model="form.description" style="width: 220px;" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU">取消</el-button>
        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
      </div>
    </el-dialog>
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="crud.loading"
      :data="crud.data"
      style="width: 100%"
      @selection-change="crud.selectionChangeHandler"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="headPic" label="头像">
        <template slot-scope="scope">
          <el-image style="width: 50px; height: 50px" :src="scope.row.headPic" fit="cover"></el-image>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="userName" label="用户名称" /> -->
      <el-table-column prop="nickName" label="用户昵称" />
      <el-table-column prop="userRole" label="用户类型">
        <template slot-scope="scope">
          <span>{{ scope.row.userRole == 0 ? "家长" : "机构" }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="userSn" label="用户编号" />
      <el-table-column prop="vipRank" label="用户等级">
        <template slot-scope="scope">
          <span>{{ getVipRank(scope.row.vipRank) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="userMoney" label="用户佣金" />
      <el-table-column prop="sex" label="用户性别">
        <template slot-scope="scope">
          <span>{{ scope.row.sex == 1 ? "男" : scope.row.sex == 2 ? "女" : "未知" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="regTime" label="注册时间" />
      <el-table-column prop="lastLogin" label="最后登录时间" />
      <el-table-column prop="lastIp" label="最后登录IP" />
      <el-table-column prop="ifLock" label="是否冻结">
        <template slot-scope="scope">
          <el-switch :value="scope.row.ifLock" @change="toLock(scope.row)"> </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150px" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="degnjiModify(scope.row)">等级修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination />
    <el-dialog :visible.sync="degnjiShow" title="设置等级" append-to-body width="530px">
      <el-form size="small" :model="degnjiForm" :inline="true" label-width="100px">
        <el-form-item label="等级修改" prop="description"> </el-form-item>
        <el-select v-model="degnjiForm.vipRank" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="degnjiShow = false">取消</el-button>
        <el-button :loading="degnji_loading" type="primary" :disbaled="degnji_loading" @click="djSubmit"
          >确认</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import crudJob from "@/api/system/timing";
import { userRankChange, userLock } from "@/api/mini/user";
import CRUD, { presenter, header, form, crud } from "@crud/crud";
import rrOperation from "@crud/RR.operation";
import crudOperation from "@crud/CRUD.operation";
import pagination from "@crud/Pagination";
import DateRangePicker from "@/components/DateRangePicker";

const defaultForm = {
  id: null,
  jobName: null,
  subTask: null,
  beanName: null,
  methodName: null,
  params: null,
  cronExpression: null,
  pauseAfterFailure: true,
  isPause: false,
  personInCharge: null,
  email: null,
  description: null,
};
export default {
  name: "Timing",
  components: { pagination, crudOperation, rrOperation, DateRangePicker },
  cruds() {
    return CRUD({
      title: "用户列表",
      url: "api/user/userList",
      listMethod: "post",
      listKey: ["data", "list"],
      crudMethod: { ...crudJob },
    });
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  data() {
    return {
      delLoading: false,
      permission: {
        add: ["admin", "timing:add"],
        edit: ["admin", "timing:edit"],
        del: ["admin", "timing:del"],
      },
      rules: {
        jobName: [{ required: true, message: "请输入任务名称", trigger: "blur" }],
        description: [{ required: true, message: "请输入任务描述", trigger: "blur" }],
        beanName: [{ required: true, message: "请输入Bean名称", trigger: "blur" }],
        methodName: [{ required: true, message: "请输入方法名称", trigger: "blur" }],
        cronExpression: [{ required: true, message: "请输入Cron表达式", trigger: "blur" }],
        personInCharge: [{ required: true, message: "请输入负责人名称", trigger: "blur" }],
      },
      degnjiForm: {
        userId: "",
        vipRank: "",
      },
      degnjiShow: false,
      options: [
        { value: 0, label: "普通" },
        { value: 1, label: "斗士" },
        { value: 2, label: "猛士" },
        { value: 3, label: "王者" },
      ],
      degnji_loading: false,
    };
  },
  computed: {
    getVipRank() {
      return function(val) {
        switch (val) {
          case 0:
            return "普通";
          case 1:
            return "斗士";
          case 2:
            return "猛士";
          case 3:
            return "王者";
        }
      };
    },
  },
  methods: {
    toLock(row) {
      let str = row.ifLock ? "解冻" : "冻结";
      this.$confirm("是否" + str, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        userLock(row.userId).then((res) => {
          this.$message.success("修改成功");
          this.crud.refresh();
        });
      });
    },
    djSubmit() {
      this.degnji_loading = true;
      userRankChange({ ...this.degnjiForm }).then((res) => {
        this.$message.success("设置成功");
        this.degnjiShow = false;
        this.degnji_loading = false;
        this.crud.refresh();
      });
    },
    degnjiModify(row) {
      this.degnjiForm.userId = row.userId;
      this.degnjiForm.vipRank = row.vipRank;
      console.log(this.degnjiForm);

      this.degnjiShow = true;
    },
    // 执行
    execute(id) {
      crudJob
        .execution(id)
        .then((res) => {
          this.crud.notify("执行成功", CRUD.NOTIFICATION_TYPE.SUCCESS);
        })
        .catch((err) => {
          console.log(err.response.data.message);
        });
    },
    // 改变状态
    updateStatus(id, status) {
      if (status === "恢复") {
        this.updateParams(id);
      }
      crudJob
        .updateIsPause(id)
        .then((res) => {
          this.crud.toQuery();
          this.crud.notify(status + "成功", CRUD.NOTIFICATION_TYPE.SUCCESS);
        })
        .catch((err) => {
          console.log(err.response.data.message);
        });
    },
    updateParams(id) {
      console.log(id);
    },
    delMethod(id) {
      this.delLoading = true;
      crudJob
        .del([id])
        .then(() => {
          this.delLoading = false;
          this.$refs[id].doClose();
          this.crud.dleChangePage(1);
          this.crud.delSuccessNotify();
          this.crud.toQuery();
        })
        .catch(() => {
          this.delLoading = false;
          this.$refs[id].doClose();
        });
    },
    // 显示日志
    doLog() {
      this.$refs.log.dialog = true;
      this.$refs.log.doInit();
    },
    checkboxT(row, rowIndex) {
      return row.id !== 1;
    },
  },
};
</script>
